<template>
    <div>
        <el-container class="home_container">
            <el-header height="60px" style="background-color: #ffffff">
                <el-row>
                    <el-col :span="2">
                        <div>
                            <img class='tupian' style="padding-left: 30%;padding-top:5%;width: 50px;height: 50px"
                                 src="../../assets/picture/shequyiiqingfangkong.png">
                        </div>
                    </el-col>
                    <el-col :span="5">
                        <div>
                            <img class='tupian' src="../../assets/picture/yiqingfangkong.png">
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <el-menu
                                :default-active="activeIndex2"
                                :router="true"
                                class="el-menu-demo"
                                mode="horizontal"
                                background-color="#fcfcfc"
                                active-text-color="#FF6666"
                                text-color="black">
                            <el-menu-item index="/ESP">首页</el-menu-item>
                            <el-menu-item index="/news">防疫资讯</el-menu-item>
                            <el-submenu index="/community">
                                <template slot="title">社区防疫</template>
                                <el-menu-item index="/community/goods">防疫物资</el-menu-item>
                                <el-menu-item index="/community/vaccineApply">疫苗预约</el-menu-item>
                                <el-menu-item index="/community/backHome">返乡申报</el-menu-item>
                            </el-submenu>
                            <el-menu-item index="/map">疫情地图</el-menu-item>
                            <el-submenu index="/prevent">
                                <template slot="title">防疫常识</template>
                                <el-menu-item index="/prevent/prevention">疫情科普</el-menu-item>
                                <el-menu-item index="/prevent/story">我们&抗疫</el-menu-item>
                                <el-menu-item index="/"><a href="https://www.12371.cn/special/xgyq/zgdt/"
                                                           target="_blank" style="color: #07eed2">官网借鉴(删)</a>
                                </el-menu-item>
                            </el-submenu>
                        </el-menu>
                    </el-col>
                    <el-col :span="5">
                        <div class="user_login">
                            <ul v-if="username==null" class="Login">
                                <el-link href="/#/login" style="font-size: 15px;color: black">登录</el-link>
                                <div style="padding-top: 2px">
                                    <el-divider direction="vertical"></el-divider>
                                </div>
                                <el-link href="/#/register" style="font-size: 15px;color: black">注册</el-link>
                            </ul>
                        </div>
                        <div>
                            <ul v-if="username!=null">
                                <el-dropdown trigger="hover" class="personStyle">
                                    <img style="height: 35px;width: 35px" src="../../assets/picture/person.png">
                                    <el-dropdown-menu slot="dropdown">
                                        <el-dropdown-item disabled>{{username}}^ᴗ^</el-dropdown-item>
                                        <el-dropdown-item @click.native="personalCenter">{{identity}}</el-dropdown-item>
                                        <el-dropdown-item @click.native="getInformByUserId">我的通知</el-dropdown-item>
                                        <el-dropdown-item @click.native="showPersonDialog">健康码</el-dropdown-item>
                                        <el-dropdown-item @click.native="logout">安全退出</el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>
                            </ul>
                        </div>
                    </el-col>
                </el-row>
            </el-header>
            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>
        <el-dialog title="健康码" :visible.sync="PersonDialog" @colse="PersonDialogClosed" width="30%" center>
            <div class="CodeStyle">
                <vue-qr :text="text0+personForm.userID+text2+text+personForm.uname+text2+text1+personForm.health"
                        :correctLevel="3"
                        :size="250"
                        :margin="10"
                        :colorDark=this.color
                        colorLight="white"
                        backgroundColor="white"
                        backgroundDimming="white"
                        :logoScale=".2"
                        :logoMargin="5"
                        logoBackgroundColor="white"
                ></vue-qr>
            </div>
            <!--前端加:是可以使用data里的信息字段-->
        </el-dialog>


        <el-dialog title="我的通知" :visible.sync="showInform" center>
            <div style="padding-left: 85%">
                <el-link type="primary" @click="goToAllInform"><span style="font-weight: bold;">全部通知</span></el-link>
            </div>
            <div class="CarStyle">
                <div v-for="(n,index) in this.Inform5.length" :key="index" class="text item">
                    <div style="height: 3px">
                    </div>
                    <el-card shadow="hover" style="background-color: #e5e8e8">
                        <div>
                            {{Inform5[index].informTime}}
                        </div>
                        <div>
                            {{Inform5[index].informDetail}}
                        </div>
                    </el-card>
                    <div style="height: 4px">
                    </div>
                </div>
            </div>
            <div>
                <span style="color: #ff0000">此页面只展示最近的5条通知记录</span>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import vueQr from "vue-qr"; //引入二维码生成组件
    export default {
        name: "Home",
        data() {
            return {
                activeIndex2: '1',
                userID: "",
                uid: "",
                username: null,
                identity: "用户中心",
                password: '',
                token: "",

                text0: "UID:",
                text: "姓名:",
                text1: "健康状况:",
                text2: "---",
                personForm: {
                    userID: "",
                    uname: "",
                    health: "",
                },
                PersonDialog: false,
                color: "#2ba245",

                showInform: false,
                AllInform: [],
                Inform5: [{"informTime":"","informDetail":""}],

            }
        },
        components: {
            vueQr //二维码生成组件
        },
        created() {
            this.userID = window.sessionStorage.getItem('UUID')
            this.uid = window.sessionStorage.getItem('uid')
            this.username = window.sessionStorage.getItem('username')
            this.password = window.sessionStorage.getItem('password')
            this.token = window.sessionStorage.getItem('token')
            /*this.getInformByUserId()*/
        },
        methods: {
            async showPersonDialog() {
                console.log(this.userID)
                const {data: res} = await this.$http.get("getUserByUUID?UUID=" + this.userID);
                this.personForm = res;
                if (this.personForm.health === "健康") {
                    this.color = "#2ba245"
                }
                if (this.personForm.health === "疑似") {
                    this.color = "#f8d000"
                }
                if (this.personForm.health === "确诊") {
                    this.color = "#f60000"
                }
                this.PersonDialog = true;
            },
            PersonDialogClosed() {
                this.$refs.personFormRef.resetFields();
            },
            logout() {
                console.log("退出成功！清除session！重置路由")
                window.sessionStorage.clear(); //清除session
                this.$router.push("/"); //重置路由
                location.reload();
            },
            personalCenter() {
                this.$router.push("/personal");//跳转到个人中心页面
            },
            /*GoToInform() {
            this.showInform = true

            },*/
            async getInformByUserId() {
                const {data: res} = await this.$http.get("getInformByUserId?uid=" + this.uid);
                this.AllInform = res;
                if(this.AllInform.length===0){
                    this.$message.info("暂无通知")
                }else if(this.AllInform.length<5){
                    for (let i = 0; i < this.AllInform.length; i++) {
                        this.Inform5[i] = this.AllInform[i]
                    }
                    this.showInform = true
                }else{
                    /*console.log(this.AllInform)*/
                    for (let i = 0; i < 5; i++) {
                        this.Inform5[i] = this.AllInform[i]
                    }
                    /*console.log(this.Inform5)*/
                    this.showInform = true
                }
            },
            goToAllInform() {
                this.showInform = false;
                this.$router.push("/InformToUser");
            }
        }
    }
</script>

<style scoped>
    .home_container {
        height: 100%;
    }

    .el-header {
        background-color: #ffffff;
        /*background-color: #545c64;*/
        align-items: center;
    }

    .el-menu-item {
    }

    .tupian {
        height: 60px;
        width: 60px
    }

    .CodeStyle {
        display: flex;
        width: 250px;
        margin: 0 auto;
    }

    .user_login {
        display: flex;
        padding-top: 1%;
        padding-left: 10%;
        align-items: center;
    }

    .Login {
        display: flex;
        padding-left: 50%;
        align-items: center;
    }

    .personStyle {
        display: flex;
        padding-top: 0px;
        padding-left: 60%;
        align-items: center;
    }

    /deep/ .el-main {
        padding: 0; overflow: hidden;

    }

    /deep/ .el-link {
        font-size: 15px;
    }

    .el-main {
        background-color: #ffffff;
    }
</style>

